<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./../../resources/templates/template.xhtml">

    <ui:define name="header">
        <!-- Configuração do idioma de exibição do scheduler -->
        <h:outputScript library="scripts" name="primefaces-locale.js"/>

        <style type="text/css">
            .bottom-command-right
            {
                width: 100%;
                text-align: right;
                padding-right: 10px;
            }
            .new-activity-box
            {
                max-width: 45%;
                margin-left: 5px;
                margin-right: 5px;
                display: inline-block;
            }
            .ui-wizard-content
            {
                text-align: left !important;

            }
        </style>

        <script type="text/javascript">
            function handleAction(xhr, status, args){
                if(args.key == "fecharDlgAtividade"){
                    dlgAtividade.hide();
                }
            }
        </script>
    </ui:define>

    <ui:define name="content">
        <h:form id="frmNovo">
            <!-- Exibicao de mensagens globais -->
            <p:growl id="gMessages" sticky="false" globalOnly="true" />

            <p:wizard id="wizard"
                      widgetVar="wiz"
                      flowListener="#{novoEventoTesteBean.onWizardFlow}"
                      nextLabel="Próximo"
                      backLabel="Anterior">

                <!-- Dados do evento -->
                <p:tab id="tabDadosEvento"
                       title="Dados do evento">
                    <p:panel>
                        <p:messages id="mNovoMessages"
                                    closable="true" 
                                    redisplay="true"/>
                        <p:panelGrid columns="1" 
                                     styleClass="gridNoLine">
                            <p:panelGrid columns="2" 
                                         styleClass="gridNoLine">
                                <h:outputLabel value="*Nome:" />
                                <p:inputText value="#{novoEventoTesteBean.evento.nmeEvento}"
                                             required="true"
                                             requiredMessage="Digite o nome do evento."
                                             maxlength="80"/>
                            </p:panelGrid>
                            <p:panelGrid columns="2" 
                                         styleClass="gridNoLine">
                                <h:outputLabel value="*Tipo de evento:" />
                                <p:selectOneMenu value="#{novoEventoTesteBean.evento.tdTipoEvento}"
                                                 required="true"
                                                 requiredMessage="Selecione o tipo de evento."
                                                 effect="fade">
                                    <f:converter converterId="tipoEventoConversor"/>
                                    <f:selectItem itemLabel="Selecione um item..."
                                                  itemValue="" />
                                    <f:selectItems value="#{novoEventoTesteBean.tiposEvento}" 
                                                   var="tipo"
                                                   itemLabel="#{tipo.nmeTipoEvento}" 
                                                   itemValue="#{tipo}" />
                                </p:selectOneMenu>
                            </p:panelGrid>
                            <p:panelGrid columns="2" 
                                         styleClass="gridNoLine">
                                <h:outputLabel value="*Públicos:" />
                                <p:selectCheckboxMenu value="#{novoEventoTesteBean.publicos}" 
                                                      label="Público-alvo:"
                                                      required="true"
                                                      requiredMessage="Selecione o tipo de público do evento.">
                                    <f:converter converterId="publicoConversor" />
                                    <f:selectItems value="#{novoEventoTesteBean.listaPublicos}" />
                                </p:selectCheckboxMenu>
                            </p:panelGrid>
                            <p:panelGrid columns="2" styleClass="gridNoLine">
                                <h:outputLabel value="Descrição:" />
                                <p:inputTextarea value="#{novoEventoTesteBean.evento.dscEvento}"
                                                 maxlength="250"/>
                            </p:panelGrid>
                            <p:panelGrid columns="2" styleClass="gridNoLine">
                                <h:outputLabel value="*Data de início:" />
                                <p:calendar id="calDataInicioEvento" 
                                            value="#{novoEventoTesteBean.evento.dtaInicioEvento}" 
                                            showOn="button"
                                            navigator="true"
                                            locale="pt" 
                                            pattern="dd/MM/yyyy HH:mm"
                                            stepMinute="10"
                                            label="Data de início:"
                                            maxdate="#{novoEventoTesteBean.evento.dtaTerminoEvento}"
                                            required="true"
                                            requiredMessage="Selecione a data de início do evento.">
                                    <p:ajax event="dateSelect"
                                            update=":frmNovo:calDataTerminoEvento :frmNovo:gMessages" /> 
                                </p:calendar>
                            </p:panelGrid> 
                            <p:panelGrid columns="2" 
                                         styleClass="gridNoLine">
                                <h:outputLabel value="*Data de término:" />
                                <p:calendar id="calDataTerminoEvento" 
                                            value="#{novoEventoTesteBean.evento.dtaTerminoEvento}" 
                                            showOn="button"
                                            navigator="true"
                                            locale="pt" 
                                            pattern="dd/MM/yyyy HH:mm"
                                            stepMinute="10"
                                            label="Data de término:"
                                            mindate="#{novoEventoTesteBean.evento.dtaInicioEvento}"
                                            required="true"
                                            requiredMessage="Selecione a data de término do evento.">
                                    <p:ajax event="dateSelect"
                                            update=":frmNovo:calDataInicioEvento :frmNovo:gMessages" /> 
                                </p:calendar>
                            </p:panelGrid>
                        </p:panelGrid>
                        <!-- <div style="width: 100%; text-align: right; padding-right: 5px;">
                            <p:commandButton oncomplete="wiz.next();"
                                             value="Próximo"
                                             icon="ui-icon-arrowthick-1-e"
                                             iconPos="right"
                                             update=":frmNovo:tabDadosEvento"
                                             process="@this :frmNovo:tabDadosEvento"/>
                        </div> -->
                    </p:panel>
                </p:tab>

                <!-- Atividades -->
                <p:tab id="tabAtividades"
                       title="Atividades">
                    <div class="bottom-command-right">
                        <p:commandButton type="button"
                                         oncomplete="dlgAtividade.show();"
                                         value="Adicionar"
                                         icon="ui-icon-circle-plus"
                                         iconPos="left" >
                            <f:setPropertyActionListener target="#{novoEventoTesteBean.atividadeAdicionada}"
                                                         value="#{novoEventoTesteBean.novaAtividade}" />
                        </p:commandButton>
                    </div>
                    <p:panel styleClass="new-activity-box"
                             header="Lista de atividades">
                        <p:dataTable id="dtAtividadesAdicionadas" 
                                     value="#{novoEventoTesteBean.atividades}"
                                     var="atividade"
                                     paginator="true" 
                                     rows="5" 
                                     rowsPerPageTemplate="5"
                                     paginatorPosition="bottom"
                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">

                            <p:column>
                                <f:facet name="header">
                                    Atividade
                                </f:facet>
                                <div class="bottom-command-right">
                                    <h:outputLabel value="De #{atividade.dtaInicioAtividade} à #{atividade.dtaTerminoAtividade}" />
                                </div>
                                <h:outputLabel value="#{atividade.nmeAtividade}"
                                               styleClass="t2"/>
                                <p:separator />
                                <h:outputLabel value="#{atividade.dscAtividade}" />
                            </p:column>
                        </p:dataTable>
                    </p:panel>
                </p:tab>
            </p:wizard>
            <p:dialog id="dNovaAtividade"
                      modal="true"
                      resizable="false"
                      header="Nova atividade"
                      widgetVar="dlgAtividade">
                <p:panel id="pAtividadesDados">
                    <p:messages id="mAtividades" 
                                closable="true"
                                redisplay="true" />
                    <p:panelGrid columns="2"
                                 styleClass="gridNoLine">
                        <h:outputLabel value="* Nome:" />
                        <p:inputText value="#{novoEventoTesteBean.atividadeAdicionada.nmeAtividade}"
                                     required="true"
                                     requiredMessage="Digite o nome da atividade."
                                     maxlength="80"/>
                        <h:outputLabel value="* Descrição:" />
                        <p:inputTextarea value="#{novoEventoTesteBean.atividadeAdicionada.dscAtividade}"
                                         required="true"
                                         requiredMessage="Digite a descrição da atividade."
                                         maxlength="200"/>
                        <h:outputLabel value="* Tipo:" />
                        <p:selectOneMenu value="#{novoEventoTesteBean.atividadeAdicionada.tdTipoAtividade}"
                                         required="true"
                                         requiredMessage="Selecione o tipo de atividade.">
                            <f:converter converterId="tipoAtividadeConversor" />
                            <f:selectItem itemLabel="Selecione..." itemValue="" />
                            <f:selectItems value="#{novoEventoTesteBean.tiposAtividades}"
                                           var="tipoAtividade"
                                           itemLabel="#{tipoAtividade.nmeTipoAtividade}"
                                           itemValue="#{tipoAtividade}" />
                        </p:selectOneMenu>
                        <h:outputLabel value="*Data de início:" />
                        <p:calendar id="calDataInicioAtividade" 
                                    value="#{novoEventoTesteBean.atividadeAdicionada.dtaInicioAtividade}" 
                                    showOn="button"
                                    navigator="true"
                                    locale="pt" 
                                    pattern="dd/MM/yyyy HH:mm"
                                    stepMinute="10"
                                    label="Data de início:"
                                    mindate="#{novoEventoTesteBean.today}"
                                    maxdate="#{novoEventoTesteBean.atividadeAdicionada.dtaTerminoAtividade}"
                                    required="true"
                                    requiredMessage="Selecione a data de início da atividade.">
                            <p:ajax event="dateSelect"
                                    update=":frmNovo:calDataTerminoAtividade :frmNovo:calDataTerminoAtividade :frmNovo:gMessages" /> 
                        </p:calendar>
                        <h:outputLabel value="*Data de início:" />
                        <p:calendar id="calDataTerminoAtividade" 
                                    value="#{novoEventoTesteBean.atividadeAdicionada.dtaTerminoAtividade}" 
                                    showOn="button"
                                    navigator="true"
                                    locale="pt" 
                                    pattern="dd/MM/yyyy HH:mm"
                                    stepMinute="10"
                                    label="Data de início:"
                                    mindate="#{novoEventoTesteBean.atividadeAdicionada.dtaInicioAtividade}"
                                    required="true"
                                    requiredMessage="Selecione a data de término da atividade.">
                            <p:ajax event="dateSelect"
                                    update=":frmNovo:calDataTerminoAtividade :frmNovo:calDataTerminoAtividade :frmNovo:gMessages" /> 
                        </p:calendar>
                    </p:panelGrid>
                    <div class="bottom-command-right">
                        <p:commandButton value="Adicionar"
                                         icon="ui-icon-circle-plus"
                                         iconPos="left"
                                         oncomplete="handleAction(xhr, status, args);"
                                         actionListener="#{novoEventoTesteBean.adicionarAtividade}"
                                         process=":frmNovo:pAtividadesDados @this"
                                         update=":frmNovo:mAtividades :frmNovo:pAtividadesDados :frmNovo:dtAtividadesAdicionadas"/>
                    </div>
                </p:panel>
            </p:dialog>
            
            <p:dialog id="dlgRecursos"
                      modal="true"
                      resizable="true"
                      header="Recursos - #{novoEventoTesteBean.atividadeAdicionada.nmeAtividade}">
                
            </p:dialog>
        </h:form>
    </ui:define>

</ui:composition>
